<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-16 17:09:15
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-26 10:11:37
 * @Description: 
-->
<template>
  <div>
    <div class="error-content">
      <div id="lottie" class="lottie"></div>
      <el-button
        @click="router.go(-1)"
        round
        class="btn"
        type="warning"
        icon="Back"
        >返回</el-button
      >
    </div>
  </div>
</template>
 
<script setup>
import { ref, reactive, onMounted } from "vue";
import lottie from "lottie-web";
import animationData from "@/assets/img/common/404错误.json";
import { useRouter } from "vue-router";

const router = useRouter();

onMounted(() => {
  let params = {
    container: document.getElementById("lottie"),
    renderer: "svg", //渲染方式
    loop: true, //循环播放
    autoplay: true, //自动播放
    animationData: animationData,
  };
  const animation = lottie.loadAnimation(params);
});
</script>

<style lang='less' scoped>
.error-content {
  text-align: center;
  width: 100%;
  .lottie {
    height: 80vh;
    position: relative;
    text-align: center;
  }
}
</style>
